import React, { useEffect, useState } from 'react';
import { Graph, DataUri, Shape, Node } from '@antv/x6';
import { Button } from 'antd';
import './index.less';
export default function index() {
  const [graph, setGraph] = useState<Graph | null>(null);
  const [show, setShow] = useState<Boolean>(false);

  useEffect(() => {
    //创建画布
    markgraph();
  }, []);
  // 画布是否可以平移
  const isPannable = () => {
    console.log((graph as Graph).isPannable());
  };

  //生成画布
  const markgraph = () => {
    if (show) {
      console.log('未生成画布，无需重复创建');
      return;
    }
    //创建画布
    const graph = new Graph({
      container: document.getElementById('container') as HTMLElement,
      background: {
        color: '#fffbe6', // 设置画布背景颜色
      },
      grid: {
        size: 10, // 网格大小 10px
        visible: true, // 渲染网格背景
      },
      panning: {
        enabled: true,
        modifiers: 'shift', //按住shift键并点击鼠标才能触发画布拖拽
      },
    });
    // (graph as Graph).fromJSON(data);
    setGraph(graph);
    setShow(true);
  };

  const addGraph = () => {
    const rect = new Shape.Rect({
      id: 'node1',
      x: 40,
      y: 40,
      width: 100,
      height: 40,
      label: 'rect',
      zIndex: 2,
      attrs: {
        // 指定 rect 元素的样式
        body: {
          stroke: '#000', // 边框颜色
          fill: '#fff', // 填充颜色
        },
        // 指定 text 元素的样式
        label: {
          text: 'rect', // 文字
          fill: '#333', // 文字颜色
        },
      },
    });

    const circle = new Shape.Circle({
      id: 'node2',
      x: 280,
      y: 200,
      width: 60,
      height: 60,
      label: 'circle',
      zIndex: 2,
    });

    const edge = new Shape.Edge({
      id: 'edge1',
      source: rect,
      target: circle,
      zIndex: 1,
    });
    (graph as Graph).addNode(rect);
    (graph as Graph).addNode(circle);
    (graph as Graph).addEdge(edge);
  };
  const addCustomNode1 = () => {
    const customNode: Node = new Node({
      x: 200,
      y: 200,
      width: 280,
      height: 60,
      // angle: 30,
      markup: [
        {
          tagName: 'rect',
          selector: 'body',
        },
        {
          tagName: 'text', //标签
          selector: 'label1', //选择器
        },
      ],
      attrs: {
        text: {
          fontSize: 14,
          textAnchor: 'middle',
          textVerticalAnchor: 'middle',
        },
        rect: {
          stroke: '#000',
          fill: '#fff',
          ref: 'label1',
          rx: 3,
          ry: 4,
          refWidth: 100,
          refHeight: 100,
          refX: -50,
          refY: -50,
        },
        label1: {
          text: '自定义node',
        },
      },
    });
    (graph as Graph).addNode(customNode);
  };
  const test01 = () => {
    const rect = new Shape.Rect({
      id: 'xyreact1',
      x: 40,
      y: 40,
      width: 100,
      height: 40,
      attrs: {
        // 指定 rect 元素的样式
        body: {
          stroke: '#000', // 边框颜色
          fill: '#fff', // 填充颜色
        },
        // 指定 text 元素的样式
        label: {
          text: 'rect', // 文字
          fill: 'blue', // 文字颜色
        },
      },
    });
    (graph as Graph).addNode(rect);
  };
  const test02 = () => {
    const metadata: Node.Metadata = {
      x: 10,
      y: 150,
      width: 80,
      height: 40,
      markup: [
        {
          tagName: 'rect',
          selector: 'body',
        },
        {
          tagName: 'text',
          selector: 'label',
        },
      ],
      attrs: {
        text: {
          fill: '#fff',
          stroke: '#000',
          strokeWidth: 2,
        },
        react: {
          fontSize: 14,
          fill: 'blue',
        },
        body: {
          fill: '#fff',
          stroke: '#000',
          strokeWidth: 2,
        },
        label: {
          text: 'hahha',
          fontSize: 14,
          fill: '#333',
          fontFamily: 'Arial, helvetica, sans-serif',
          textAnchor: 'middle',
          textVerticalAnchor: 'middle',
        },
      },
    };
    (graph as Graph).addNode(metadata);
  };
  const test03 = () => {
    const metadata: Node.Metadata = {
      x: 100,
      y: 250,
      width: 200,
      height: 80,
      markup: [
        {
          tagName: 'rect',
          selector: 'body',
        },
        {
          tagName: 'text',
          selector: 'label',
          groupSelector: 'textGroup',
        },
        {
          tagName: 'text',
          selector: 'content',
          groupSelector: 'textGroup', //组选择器设置公共样式
        },
      ],
      attrs: {
        body: {
          stroke: '#5f95ff',
          strokeWidth: 1,
          fill: 'rgba(95,149,255,0.15)',
        },
        label: {
          text: '标题',
          fontSize: 16,
          // refX: 40,
          refY: 26,
        },
        content: {
          text: '描述描述描述描述',
          fontSize: 14,
          // refX: 70,
          refY: 54,
        },
        groupSelector: {
          fill: '#333',
          // fontFamily: 'Arial, helvetica, sans-serif',
          textAnchor: 'middle',
          // textVerticalAnchor: 'middle',
        },
      },
    };
    (graph as Graph).addNode(metadata);
  };
  const test04 = () => {
    const metadata: Node.Metadata = {
      x: 100,
      y: 250,
      width: 200,
      height: 80,
      markup: [
        {
          tagName: 'rect',
          selector: 'body',
        },
        {
          tagName: 'image',
          selector: 'image',
        },
        {
          tagName: 'text',
          selector: 'label',
          groupSelector: 'textGroup',
        },
        {
          tagName: 'text',
          selector: 'content',
          groupSelector: 'textGroup', //组选择器设置公共样式
        },
      ],
      attrs: {
        body: {
          stroke: '#5f95ff',
          strokeWidth: 1,
          fill: 'rgba(95,149,255,0.15)',
        },
        image: {
          'xlink:href': 'http://lbcr.sit.sf-express.com/logo_light.ico',
          with: 16,
          height: 16,
          x: 12,
          y: 30,
        },
        label: {
          text: '标题',
          fontSize: 16,
          refX: 40,
          refY: 26,
          'text-anchor': 'start',
        },
        content: {
          text: '描述描述描述描述',
          fontSize: 14,
          refX: 40,
          refY: 54,
          'text-anchor': 'start',
        },
        groupSelector: {
          fill: '#333',
          // fontFamily: 'Arial, helvetica, sans-serif',
          // 'text-anchor': 'start',
          // textVerticalAnchor: 'middle',
        },
      },
    };
    (graph as Graph).addNode(metadata);
  };
  const test05 = () => {
    const metadata: Node.Metadata = {
      x: 400,
      y: 250,
      width: 200,
      height: 80,
      markup: [
        {
          tagName: 'rect',
          selector: 'body',
        },
        {
          tagName: 'text',
          selector: 'label',
        },
      ],
      attrs: {
        body: {
          stroke: '#5f95ff',
          strokeWidth: 1,
          fill: 'rgba(95,149,255,0.15)',
          class: 'mystyle',
        },
        label: {
          text: '标题',
          fontSize: 16,
          textAnchor: 'middle',
          textVerticalAnchor: 'middle',
        },
      },
    };
    (graph as Graph).addNode(metadata);
  };
  return (
    <div>
      <div>
        <Button onClick={addGraph}>添加图像</Button>
        <Button onClick={addCustomNode1}>自定义节点</Button>
        <Button onClick={test01}>自定义节点1</Button>
        <Button onClick={test02}>自定义节点2</Button>
        <Button onClick={test03}>自定义节点3</Button>
        <Button onClick={test04}>自定义节点4</Button>
        <Button onClick={test05}>自定义节点5--使用css来定制样式</Button>
      </div>
      <div id="container" style={{ width: '100%', height: '600px' }}></div>
    </div>
  );
}
